---
title: 編輯器設定
description: 設定好你的編輯器來開發 Astro。
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

自訂你的程式編輯器來改善 Astro 的開發體驗並啟用新功能。

## VS Code

[VS Code](https://code.visualstudio.com/) 是受網頁開發者歡迎的程式編輯器，其由 Microsoft 所開發。一些著名的線上編輯器如 [GitHub Codespaces](https://github.com/features/codespaces) 以及 [Gitpod](https://gitpod.io/) 也都是藉由 VS Code 的引擎來驅動的。

即使 Astro 可以在任何程式編輯器運作，但我們建議使用 VS Code 作為 Astro 專案的編輯器。我們有維護一個官方的 [Astro VS Code 延伸模組](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)，其能改善開發 Astro 專案的體驗並帶來一些關鍵的功能。

- 在 `.astro` 檔案中能夠突顯程式語法
- 在 `.astro` 檔案中顯示 TypeScript 的型別資訊
- [VS Code 智能提醒](https://code.visualstudio.com/docs/editor/intellisense) 可帶來程式碼自動完成、提示等

讓我們直接開始，今天就來安裝 [Astro VS Code 延伸模組](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) 吧。

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>看看如何在你的 Astro 專案[設定 TypeScript](/zh-tw/guides/typescript/)。</ReadMore>

## JetBrains IDE

WebStorm 2023.1 首次支持 Astro。 您可以透過 [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) 或在 IDE 的「外掛程式」標籤中搜尋「Astro」來安裝官方外掛程式。 該外掛程式包括語法突顯、程式碼补全和格式化等功能，並計劃在未來添加更多高級功能。 它也適用於所有其他[支持 JavaScript 的 JetBrains IDE](https://www.jetbrains.com/products/#lang=js&type=ide)。

JetBrains 即將推出的 [Fleet IDE](https://www.jetbrains.com/fleet/) 包括語言伺服器支持，並將能夠使用官方 Astro 工具。

## 其他程式編輯器

我們厲害的社群也為了其他有名的編輯器維護了數個延伸模組，以下包括：

- [Open VSX 的 VS Code 延伸模組](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">官方</Badge></span> - 官方的 Astro VS Code 延伸模組，對部分開放平台如 [VSCodium](https://vscodium.com/) 可到 Open VSX registry 取得
- [Nova 延伸模組](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">社群</Badge></span> - 在 Nova 中可以提供 Astro 的語法突顯以及程式碼自動完成功能
- [Vim 外掛](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">社群</Badge></span> - 在 Vim 或 Neovim 中可以提供 Astro 語法突顯、縮排及程式碼摺疊功能
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) 及 [TreeSitter](https://github.com/virchau13/tree-sitter-astro) 外掛 <span style="margin: 0.25em;"><Badge variant="neutral">社群</Badge></span> - 在 Neovim 中可以提供語法突顯、treesitter 解析及程式碼自動完成功能
- Emacs - 請參閱[設定Emacs 和Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) 的說明<span style="margin: 0.25em;"><Badge variant="neutral">社群</Badge></span>來與 Astro 合作
- [Sublime Text 的 Astro 語法突顯](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">社群</Badge></span > - Sublime Text 的 Astro 套件，可在Sublime Text 套件管理器上獲取

## 線上編輯器

除了在本地端使用編輯器外，Astro 在線上編輯器也能運作良好，以下包括：

- [StackBlitz](https://stackblitz.com/) 和 [CodeSandbox](https://codesandbox.io/) - 線上編輯器可在你的瀏覽器上執行，且有支援 `.astro` 檔案的語法突顯。完全不需要安裝以及設定！
- [GitHub.dev](https://github.dev/) - 可以讓你將 Astro 的 VS Code 延伸模組以[瀏覽器擴充功能](https://code.visualstudio.com/api/extension-guides/web-extensions)的方式安裝，其可取得一些延伸模組的功能，而目前只支援語法突顯。
- [Gitpod](https://gitpod.io/) - 雲端上完整的開發環境，可以在 Open VSX 上安裝官方Astro 的 VS Code 延伸模組。

## 其他工具

### ESLint

[ESLint](https://eslint.org/) 是有名的 JavaScript 及 JSX 的程式碼分析工具。[社群維護的外掛](https://github.com/ota-meshi/eslint-plugin-astro)可以下載來增加對 Astro 的支援。

詳細資訊可至[該專案的使用說明](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/)來了解如何為你的專案安裝及設定 ESLint。

### Stylelint

[Stylelint](https://stylelint.io/) 是一種流行的 CSS linter。[社群維護的 Stylelint 配置](https://github.com/ota-meshi/stylelint-config-html) 提供 Astro 支援。

安裝說明、編輯器整合和其他資訊可以在專案的 README 文件中找到。

### Prettier

[Prettier](https://prettier.io/) 是一種流行的 JavaScript、HTML、CSS 等格式化程式。 如果您使用 [Astro VS Code 擴充功能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) 或 [其他編輯器中的 Astro 語言伺服器](#其他程式編輯器)，包括了 Prettier 程式碼格式化功能。

要在編輯器外部（例如CLI）或不支持我們的編輯器工具的編輯器內部添加對格式化 `.astro` 文件的支持，請安裝[官方 Astro Prettier 插件](https://github.com/withastro/prettier-plugin-astro)。

首先下載 Prettier 及外掛來開始：

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

當你執行 Prettier 時，Prettier 會自動偵測外掛並利用它來處理 `.astro` 檔：

```shell
prettier --write .
```

參閱 [Prettier 外掛的 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) 來了解它所支援的選項以及如何在 VS Code 內設定 Prettier 等等資訊。
